<template>
  <div class="pagination-container">
    <button>last</button>
    <button @click="clickPageNumberCallback(1)" v-show="array.indexOf(1)<0">1</button>
    <button @click="clickPageNumberCallback(pn)" :class="{active:pn===pageNumber}" v-for="pn in array">{{ pn }}</button>
    <button @click="clickPageNumberCallback(totalPageCount)" v-show="array.indexOf(totalPageCount)<0">{{ totalPageCount }}</button>
    <button>next</button>
    <button style="margin-left:30px;">共{{totalPageCount}}页</button>
  </div>
</template>

<script>
import {getStartNumberAndEndNumber} from '@/tool/pagination'

export default {
  name: "Pagination",
  props: ['pageNumber', 'pageSize', 'total', 'continues'],
  computed: {
    totalPageCount() {
      return Math.ceil(this.total / this.pageSize);
    },
    array(){
      try {
        return getStartNumberAndEndNumber(this.pageNumber, this.totalPageCount, this.continues)
      }catch (e){
        return [];
      }
    }
  },
  methods: {
    clickPageNumberCallback(pageNumber){
      this.$emit('clickPageNumberEvent',pageNumber);
    }
  }
}
</script>

<style scoped lang="less">
.pagination-container {
  text-align: center;
  * {
    margin: 10px 10px;
    min-width: 30px;
  }

  .active {
    color: red;
  }
}
</style>
